/**
 * TVOC-高值点位
 */
import React, { useEffect, useState } from 'react'
import Feature from 'ol/Feature'
import { transform } from 'ol/proj'
import Point from 'ol/geom/Point'
import { Style, Stroke, Icon } from 'ol/style'
import VectorSource from 'ol/source/Vector'
import { wgs84togcj02 } from '@ysrd/ol5-react-ts/utils'
import { Layer } from '@ysrd/ol5-react-ts'
import axios from 'axios'
import { VOC_sails, tem } from '&/images/layer/index'
import dayjs from 'dayjs'
import { message } from 'antd'

export default (props) => {
  const { layers, setLayers } = props
  const [list, setList] = useState([])
  useEffect(() => {
    getData()
  }, [])
  useEffect(() => {
    if (props.visible) {
      getData()
    }
    if (!props.visible || list.length < 0) return
    const features = []
    list.map((item) => {
      features.push(
        new Feature({
          geometry: new Point(
            transform(
              wgs84togcj02(Number(item.longitude), Number(item.latitude)),
              'EPSG:4326',
              'EPSG:3857'
            )
          )
        })
      )
    })
    setLayers(
      layers.map((item) => {
        if (item.layerId === props.layerId) {
          item.source = new VectorSource({
            features: features
          })
          item.style = new Style({
            image: new Icon({
              src: props.id == 5 ? tem : VOC_sails
            })
          })
        }
        return item
      })
    )
  }, [props.visible])

  const getData = () => {
    axios({
      url: '/v1/clue-list',
      method: 'get',
      baseURL: 'https://national-congress-traceability-pre.airqualitychina.cn',
      params: {
        clue_submodule_type_id: props.id == 5 ? 44 : 24,
        start_time: dayjs().add(-1, 'h').format('YYYY-MM-DD HH:00:00'),
        end_time: dayjs().format('YYYY-MM-DD HH:00:00')
      }
    }).then(({ data }) => {
      if (data.result.length > 0) {
        setList(data.result)
      } else {
        if (props.visible) {
          message.info('接口无数据')
        }
      }
    })
  }
  return (
    <Layer.VectorLayer
      visible={props.visible}
      source={props.source}
      style={props.style}
      name={props.layerId}
      zIndex={50}
    />
  )
}
